<template>
  <div class="home-container">
    <el-row :gutter="20" justify="center">
      <el-col :span="16">
        <div class="main-category">
          <el-card class="category-card" shadow="hover" @click="navigateToCategory('BIRDS')">
            <div class="category-content">
              <img src="@/assets/bird2.gif" class="main-image" />
              <br>
              <img src="@/assets/birds_icon.gif" />
              <p>Exotic Varieties</p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" justify="center" class="sub-categories">
      <el-col :xs="12" :sm="6" :md="4">
        <el-card class="category-card" shadow="hover" @click="navigateToCategory('FISH')">
          <div class="category-content">
            <img src="@/assets/fish2.gif" />
            <br>
            <img src="@/assets/fish_icon.gif" />
            <p>Saltwater, Freshwater</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <el-card class="category-card" shadow="hover" @click="navigateToCategory('DOGS')">
          <div class="category-content">
            <img src="@/assets/dog1.gif" />
            <br>
            <img src="@/assets/dogs_icon.gif" />
            <p>Various Breeds</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <el-card class="category-card" shadow="hover" @click="navigateToCategory('CATS')">
          <div class="category-content">
            <img src="@/assets/cat1.gif" />
            <br>
            <img src="@/assets/cats_icon.gif" />
            <p>Various Breeds, Exotic Varieties</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6" :md="4">
        <el-card class="category-card" shadow="hover" @click="navigateToCategory('REPTILES')">
          <div class="category-content">
            <img src="@/assets/snake1.gif" />
            <br>
            <img src="@/assets/reptiles_icon.gif" />
            <p>Lizards, Turtles, Snakes</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 处理卡片点击事件，导航到对应的分类详情页面
const navigateToCategory = (categoryId: string) => {
  router.push(`/category/${categoryId}`)
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.main-category {
  margin-bottom: 30px;
}

.category-card {
  transition: transform 0.3s ease;
  height: 100%;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-content {
  text-align: center;
}

.main-image {
  width: 180px;
  height: auto;
}

.sub-categories {
  margin-top: 20px;
}

p {
  color: #0e40f5;
  margin: 5px 0;
}
</style>